import React, { Component } from 'react';
import {connect} from 'react-redux'
import { Layout, Menu } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  SketchOutlined,
  PoweroffOutlined,
  RedditOutlined,
  CloseCircleOutlined,
  CheckCircleOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import './index.css'

// 引入自定义组件
import AdminLogin  from './components/adminLogin'
import TaskForm from './components/taskForm';

// 引入自定义操作
import { ChangeAdminBaseInfoActivate, ChangeAdminLoginActivate, 
          AdminGetDataSaga } from '../../redux/actions/admin';

const { Header, Sider, Content } = Layout;



class Admin extends Component {
    
    state = {
        collapsed: false,
      };
    
      toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        });
      };

    //   管理员退出
    logout = () => {
        this.props.ChangeAdminLoginActivate({isLogin: false})
    }

    // 刷新页面
    updateWin = () => {
        window.location.reload()
    }

    // 导航栏选择，任务未审核、已通过、未通过
    menuAct = (value) => {
        const menu_key = value.key
        this.props.ChangeAdminLoginActivate({form_num: menu_key}) 
        setTimeout(()=>{
          this.props.AdminGetDataSaga(this.props.AdminLoginState)
        }, 100)
    }
    
      render() {
        const { AdminLoginState } = this.props
        return (
            !AdminLoginState.isLogin
              ?
              <AdminLogin />
              :
            (
              <Layout id='components-layout-demo-responsive'>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                  <div className="logo">
                      {/* <SketchOutlined />  */}
                      <Link to={{
                          pathname: '/'
                        }}>
                          <RedditOutlined />
                      </Link>
                  </div>
                  <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={this.props.AdminLoginState.form_num}
                  >
                      <Menu.Item key={'0'} icon={<QuestionCircleOutlined />} onClick={this.menuAct}>待审核</Menu.Item>
                      {/* 以下两个仅用于展示，而不用于实现功能 */}
                      <Menu.Item key={'1'} icon={<CheckCircleOutlined />} onClick={this.menuAct}>已通过</Menu.Item> 
                      <Menu.Item key={'2'} icon={<CloseCircleOutlined />} onClick={this.menuAct}>未通过</Menu.Item>
                  </Menu>
                </Sider>
                <Layout className="site-layout">
                  <Header className="wjf-header site-layout-background" style={{ padding: 0 }}>
                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                      className: 'trigger',
                      onClick: this.toggle,
                    })}
                    <div className='title'>
                        管理员页面
                    </div>
                    <div className='logout'>
                        <PoweroffOutlined onClick={this.logout}/>
                    </div>
                  </Header>
                  <Content
                    className="site-layout-background"
                    style={{
                      margin: '24px 16px',
                      padding: 24,
                      minHeight: 808
                    }}
                  >
                    <TaskForm />
                  </Content>
                </Layout>
              </Layout>
            )
        );
      }
}

export default connect(
    state => ({
      AdminLoginState: state.PublicReducer.adminLoginState
    }),
    {
      ChangeAdminLoginActivate,
      AdminGetDataSaga,
    }
)(Admin)